<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>house.html</title>

    <!-- 引入资源 -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <script src="/plugins/elementui/index.js"></script>
    <!--导入axios二次封装的工具-->
    <script src="/js/request.js"></script>

</head>
<body>

<div id="app">

    <div>

        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible=true">添加</el-button>

        <el-table
                :data="houses"
                border
                style="width: 98%;margin-top: 10px">
            <el-table-column
                    prop="id"
                    label="编号">
            </el-table-column>

            <el-table-column align="center"
                             prop="floor"
                             label="楼层">
            </el-table-column>

            <el-table-column
                    prop="houseNo"
                    label="房屋号码">
            </el-table-column>

            <el-table-column
                    prop="owner.userName"
                    label="业主姓名">
            </el-table-column>

            <el-table-column
                    prop="owner.tel"
                    label="业主电话">
            </el-table-column>

            <el-table-column
                    prop="owner.sex"
                    label="性别">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.sex == '0' ? 'primary' : 'success'"
                            disable-transitions>{{scope.row.sex == '1' ? "张飞" : "闭月"}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    prop="intoDate"
                    label="入住时间">
            </el-table-column>
            <el-table-column
                    prop="area"
                    label="房屋面积">
            </el-table-column>

            <el-table-column
                    prop="status"
                    label="房屋状态">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.status == '0' ? 'primary' : 'success'"
                            disable-transitions>{{scope.row.status == '1' ? "入住" : "空闲"}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    prop="createTime"
                    label="房屋时间">
            </el-table-column>

            <el-table-column
                    prop="building.numbers"
                    label="楼栋">
            </el-table-column>

            <el-table-column
                    prop="building.units"
                    label="单元">
            </el-table-column>

            <!-- template 自定义模板 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="medium"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="medium"
                            icon="el-icon-delete"
                            type="danger"
                            @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2, 3, 4]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


        <el-dialog
                title="添加修改房屋"
                :visible.sync="addDialogVisible"
                width="45%"
                @close="clearData"
                :before-close="handleClose">
            <el-form ref="form" :model="house" label-width="80px">

                <el-form-item label="楼层">
                    <el-input v-model="house.floor"></el-input>
                </el-form-item>
                <el-form-item label="房屋编号">
                    <el-input v-model="house.houseNo"></el-input>
                </el-form-item>

                <!-- 绑定数据格式的设置  value-format="yyyy-MM-dd" 前后端数据格式一致 -->
                <el-form-item label="入住时间">
                    <el-date-picker
                            v-model="house.intoDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <!--
                     el-select v-model="buildingId" 下拉框的数据绑定
                     el-option   下拉选项框
                             label   页面的文本显示
                             value   下拉框选中的值
                -->
                <el-form-item label="楼栋">
                    <el-select v-model="house.buildingId" placeholder="请选择" @change="$forceUpdate()">
                        <el-option
                                v-for="item in builds"
                                :key="item.id"
                                :label="item.numbers"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="面积">
                    <el-input v-model="house.area"></el-input>
                </el-form-item>

                <!--
                    @change 事件触发
                    $forceUpdate()  强制性刷新
                -->
                <el-form-item label="业主">
                    <el-select v-model="house.ownerId" placeholder="请选择" @change="$forceUpdate()">
                        <el-option
                                v-for="item in owners"
                                :key="item.id"
                                :label="item.userName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="house.remarks"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addUpdateData">添加修改房屋</el-button>
                    <el-button @click="addDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            currentPage: 1,  //当前页面
            pageSize: 2,    // 每页大小
            total: 0,       // 总数
            houses:[],
            addDialogVisible:false,
            house:{},       //添加的房屋
            builds:[],
            owners:[]
        },
        created(){
            this.initData(this.currentPage,this.pageSize);
            //查询楼栋
            this.initBuild();

            //初始化业主信息
            this.initOwners();
        },
        methods:{
            clearData(){
                this.house = {}
                console.log("clearData",this.house);

            },
            //编辑
            handleEdit(obj){
                //回显
                let objEdit = JSON.parse(JSON.stringify(obj));
                this.house = objEdit;

                //回显   build 和  owner
                this.house.buildingId = objEdit.building.id;
                this.house.ownerId = objEdit.owner.id;
                //数据回显
                console.log(this.house);

                //dialog 显示
                this.addDialogVisible = true;
            },

            //删除操作
            handleDelete(obj){
                let id = obj.id;
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //这里需要添加逻辑判断
                    //删除 最后一页的数据的最后一条的时候 、需要 把 currentPage - 1
                    let lastPage = Math.ceil(this.total / this.pageSize);
                    if (lastPage === this.currentPage){ //最后一页
                        if (this.total % this.pageSize === 1){ //最后一条数据
                            this.currentPage = this.currentPage - 1;
                        }
                    }
                    //发送数据
                    request({
                        method:"delete",
                        url:`/house/${id}`
                    }).then(resp=>{
                        //成功操作
                        console.log(resp);
                        //信息提示
                        this.$message({
                            type: 'success',
                            message:resp.data.message
                        });
                        //页面刷新
                        this.initData(this.currentPage,this.pageSize);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //查询 业主
            initOwners(){
                request({
                    method:"get",
                    url:"/owner/list"
                }).then(resp=>{
                    this.owners = resp.data.data;
                })
            },
            // 查询楼栋
            initBuild(){
                request({
                    method:"get",
                    url:"/building/list"
                }).then(resp=>{
                    this.builds = resp.data.data;
                })
            },

            //发送添加数据到 服务器
            addUpdateData(){

                request({
                    method:"post",
                    url:"/house",
                    data:this.house
                }).then(resp=>{
                    //提示
                    //刷新
                    //关闭
                    //清空 表单
                    this.$message({
                        type: 'success',
                        message:resp.data.message
                    });
                    this.addDialogVisible = false;

                    // 把 修改的对象 清空
                    this.house = {};
                    // 页面刷新
                    this.initData(this.currentPage,this.pageSize,this.id);

                })

            },
            handleClose(done){
                done();
            },
            handleCurrentChange(val){
                this.currentPage = val;
                this.initData(this.currentPage,this.pageSize);
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.initData(this.currentPage,this.pageSize);
            },
            initData(currentPage,pageSize){
                request({
                    method:"get",
                    url:`/house/list/${currentPage}/${pageSize}`
                }).then(resp=>{
                    // 拿到分页对象  resp.data.data
                    // 分页对象 后面的data total 是封装的数据
                    this.houses = resp.data.data.data;
                    this.total = resp.data.data.total;
                })
            }
        }
    })
</script>
</body>
</html>